<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
    width="208px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <logo :title="logoName" />
    <div class="container">
      {{ collapsed }}
      <div
        @click="clickPerson(item)"
        v-for="item in menus"
        :class="[item.name == selectedKeys ? 'selected' : '', collapsed ? 'collapsed' : '']"
        class="person-item"
      >
        <a-icon type="project" class="icon" :class="[collapsed ? 'icon-collapsed' : '']" />
        <span v-if="!collapsed">招标人1</span>
        <span @click="download(item)" v-if="!collapsed" style="margin-left: 20px">下载</span>
      </div>
    </div>
  </a-layout-sider>
</template>

<script>
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import Logo from '../tools/Logo.vue'
import { mixin, mixinDevice } from '@/utils/mixin.js'

export default {
  name: 'SideMenu',
  components: { ALayoutSider, Logo },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline',
    },
    theme: {
      type: String,
      required: false,
      default: 'light',
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menus: {
      type: Array,
      required: true,
    },
    logoName: {
      type: String,
    },
    logoLink: {
      type: String,
    },
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: '',
    }
  },

  computed: {
    smenuStyle() {
      let style = { padding: '0' }
      if (this.fixSiderbar) {
        style['height'] = 'calc(100% - 59px)'
        style['overflow'] = 'auto'
        style['overflow-x'] = 'hidden'
      }
      return style
    },
  },
  watch: {
    $route: function(val) {
      // console.log(val)
    },
  },
  methods: {
    onSelect(obj) {
      if (!obj.disabled) {
        this.selectedKeys = [obj.name]
        this.$router.push({ name: obj.name, query: { ...obj.query } })
        this.$emit('menuSelect', obj)
        this.$emit('menuSelect', obj)
      } else {
        this.$message.error('您上一步还未操作完成，无法切换菜单')
      }
    },
    onUpdateMenuTitle(obj) {
      this.$emit('updateMenuTitle', obj)
    },

    clickPerson(item) {
      this.selectedKeys = item.name
    },
    download(item) {
      console.log(item)
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  .person-item {
    height: 40px;
    line-height: 40px;
    padding-left: 24px;
    cursor: pointer;
  }

  .icon {
    margin-right: 10px;
    font-size: 14px;
  }

  .selected {
    color: #1890ff;
  }

  .collapsed {
    text-align: center;
  }

  .icon-collapsed {
    //padding: 0 32px !important;
  }
}
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
